本頁面由 Cloud Translation API 翻譯而成。

網頁版新功能

Rachel Andrew

發布日期：2025 年 5 月 20 日

在 2025 年 Google I/O 大會的「What's new in web」主題演講中，我們分享了所有 Baseline 相關公告，並簡要介紹今年已納入 Baseline 的部分功能。今年是網站和 Baseline 的豐收年，這篇文章將總結所有相關內容，並提供更多連結供您參考。

網路平台資訊主頁和 web-features

我們在 2024 年宣布推出初始的網頁平台資訊主頁，該資訊主頁採用網頁功能資料集，可讓您探索 Baseline 中的所有功能。

Web 功能資料現已完成，平台的所有功能都已對應完成。每個月都會加入新的基準資料，因此資料會更新，所有這些都會顯示在資訊主頁上。

協助您找出自身基準目標的工具

您可以根據「基準值廣泛可用」的動態目標制定瀏覽器支援政策，例如英國代理商 Clearleft，也可以根據基準年採用固定目標。您現在可以使用自有使用者資料，搭配網站功能資料，找出最適合您的目標。

去年在 I/O 大會上，我們宣布 RUMvision 將在其產品中導入 Baseline，而這項整合功能現已上線。

由於這項功能會使用 RUM 資料，因此可協助您根據該資料 (而非全球平均值) 找出要採用的基準年。這項功能還能協助您瞭解是否適合使用「廣泛可用」的基準。

您也可以使用 Google Analytics 資料，透過全新的 Google Analytics 基準目標檢查器，清楚瞭解有多少百分比的使用者支援每個基準目標。

包含百分比支援度的基準年份清單。 — Google Analytics 基準檢查工具的輸出內容。

這只是兩種工具，我們會持續開發更多工具，協助您將實際使用者資料對應至 Baseline。

Web DX 社群小組最近推出了 Netlify 擴充功能，可顯示網站上不同基準年和廣泛可用的支援資訊，協助您決定在建構工具中指定哪些目標。我們即將整合 Cloudflare 的 Observatory RUM 產品和 Contentsquare。

將資料與自己的工具整合

Web 功能資料是開放資料，可供您自行整合。我們正努力讓這項作業變得更簡單。

使用 Web Platform Dashboard API，或直接從 npm 套件取用 Web-features 資料。

您現在可以使用 W3C WebDX 社群群組的 baseline-browser-mapping 模組，將瀏覽器版本對應至基準目標。這個模組可用於伺服器端 JavaScript 環境，也可以透過下載每天從存放區重新整理的 JSON 或 CSV 檔案。

這項資料不僅包含核心基準瀏覽器集合的對應項目，也包含 Samsung Internet、Opera、UC Browser 和 Android WebView 等後端瀏覽器的對應項目。

瞭解基準目標是否支援功能

基準資訊現在已出現在大多數 MDN 和「Can I Use」頁面，也可以在 Web 平台資訊主頁、web.dev 和 CSS Tricks 的文章中找到。不過，您必須尋求支援服務才能完成這些操作。在您編寫程式碼時，IDE 和您使用的所有其他工具都會顯示 Baseline 資訊，因此這項功能的實用性會大幅提升。

很高興能與您分享，許多重要工具現在都內建了 Baseline 支援功能，或可輕鬆整合。

`browserslist-config-baseline`

許多工具 (例如 Babel 和 PostCSS) 會使用 browserslist 來決定支援哪些瀏覽器。

Chrome 團隊與 WebDX CG 和社群成員合作，共同推出名為 browserslist-config-baseline 的新工具。這樣一來，您就能以基準條件 (例如廣泛可用或基準年) 設定瀏覽器清單目標。

有了這個功能，任何採用 browserslist 目標的工具現在都能以基準條件表示。

如需進一步瞭解如何使用 Baseline 搭配 browserslist，請參閱這篇文章。

Lint 中的基準：ESLint 和 Stylelint

在 linters 領域中，最近推出了幾項新工具，讓您可以使用 Baseline 搭配 linters，其中包括 CSS 專用的 ESLint。

基準 ESLint 有 use-baseline 規則。您可以將這項設定設為偏好的基準目標，當您使用比目標更新的任何功能時，系統就會發出警告。您可以選擇如何解決這些警告：將該功能替換為原始功能，或是抑制 Linter 警告。如果您知道自己安全地使用了尖端功能 (例如漸進式增強功能)，抑制 Linter 警告就是非常有效的解決方案。

根據預設，如果在 @supports 區塊中使用較新的功能，ESLint 不會發出警告，因為不支援的瀏覽器不會評估這些功能。

針對 HTML 檢查需求，社群也提供了名為 html-eslint 的外掛程式。

Stylelint 正式支援名為 stylelint-plugin-use-baseline 的外掛程式。這項規則的運作方式與 CSS 的 ESLint 規則相同，但會在 Stylelint 上執行。

許多 Linter 也提供 IDE 外掛程式，因此您可以在編寫程式時，透過波浪形底線立即取得基準狀態的即時意見回饋。

在 VSCode 中使用的 ESLint 外掛程式，會在基準目標以外的功能上顯示底線。 — VSCode 中使用的 ESLint 外掛程式。

VS Code 和 JetBrains WebStorm 中的基準

許多 IDE 早已支援在編輯器中將滑鼠游標懸停在功能上，並查看支援的瀏覽器版本清單。

不過，要判斷該功能是否確實安全使用，可能相當困難，因為您必須在腦中分析該清單是否缺少任何主要瀏覽器，以及該瀏覽器版本的新舊程度。

為解決這個問題，我們與 VS Code 合作，這項服務是數百萬名網頁開發人員最常使用的 IDE，可將基準資料直接整合到這些懸浮卡片中。

您現在可以將滑鼠游標懸停在功能上，系統會告知您該功能是否已納入基準，以及納入時間長度，或是是否有任何主要瀏覽器尚未完全導入該功能。

VSCode 中的懸浮資訊卡，顯示基準狀態。 — VSCode 懸停資訊卡整合功能。

支援的功能包括 CSS 屬性、HTML 元素和 HTML 屬性。如需進一步瞭解，請參閱「Visual Studio Code 現已支援 Baseline」一文。

這項整合功能表示任何以 VS Code 為基礎的 IDE 也能從這些懸浮資訊卡中受益。

另外，我們也想宣布，JetBrains 正在將懸浮資訊卡導入 WebStorm JavaScript 和 TypeScript IDE。

網路的改善速度比以往更快

我們希望基準設定檔能協助您充分利用互通性網際網路的快速進步。

您可以使用網頁平台資訊主頁，查看自 2024 年 Google I/O 大會以來，過去十二個月內所有已成為新基準的功能。

另外，您也可以放心，因為有許多功能已納入 Interop 2025 專案，很快就會納入 Baseline 新功能。如要瞭解所有內含功能，請參閱「Interop2025：另一年網路平台改善計畫」。

橫向書寫模式

Browser Support

我們已將 CSS writing-mode 屬性的 sideways-rl 和 sideways-lr 值，列為新版基準功能。如果您是為了版面配置而使用垂直書寫模式，則可能需要使用橫向值。

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

錨定位置

Browser Support

Source

錨定標記位置已在 Chrome 125 中推出。這可讓您將元素的位置繫結至錨點，例如在使用按鈕開啟工具提示時。

這項功能現在已納入 Interop 2025，因此應該會在今年加入 Baseline。

Core Web Vitals：LCP 和 INP

LCP API

Browser Support

Source

事件時間 API (適用於 INP)

Browser Support

Source

網站使用體驗指標可協助您量化網站體驗，並找出改善之道。網站體驗核心指標計畫旨在簡化整體環境，並協助網站專注於最重要的指標，也就是網站體驗核心指標。

Interop 2025 包含最大內容繪製 (LCP) 和Interaction to Next Paint (INP) 指標，方法是在各瀏覽器中實作 LargestContentfulPaint API 和 Event Timing API。

改善 `<details>` 元素

<details> 元素本身已可廣泛使用。由於 Interop 2025 包含許多可讓含有 <details> 的揭露小工具更實用的功能，因此已納入其中。

<details> 元素包含 <summary> 元素，這是在 <details> 元素收合時，網頁上顯示的部分。<summary> 外部是 <details> 元素的內容，在使用者點選摘要之前會處於隱藏狀態。

在 Interop 2025 期間，我們將使用 content-visibility 而非 display 隱藏內容，這意味著如果未展開，內容就不會顯示。

::marker 擬似元素也是 Interop 2025 工作內容的一部分。::marker 擬似元素可讓您為 <summary> 元素的展開三角形設定樣式。

Browser Support

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

接著是另一個虛設元素 ::details-content。

Browser Support

Source

::details-content 代表內容，也就是詳細資料元素的部分，可展開和摺疊，並讓您設定樣式。

[open]::details-content {
  border: 5px dashed hotpink;
}

我們也做出了一些不錯的改善，例如自動展開使用頁面內搜尋功能比對的 <details> 元素，以及將 HTML hidden 屬性的 until-found 值設為 Baseline Newly available。這會隱藏元素，直到使用瀏覽器的「在頁面中尋找」搜尋功能找到該元素，或直接透過網址片段前往該元素為止。

CSS `@scope`

Browser Support

Source

您可以使用 CSS @scope 規則限制選取器的觸及範圍。使用 @scope 設定範圍根目錄後，在 at-rule 內嵌套的任何樣式規則只會套用至該 DOM 樹狀結構。

舉例來說，如果您只想將 <img> 元素指定給具有 .card 類別的元素，.card 就會成為範圍根目錄。

@scope (.card) {
    img {
        border-color: green;
    }
}

如需進一步瞭解，請參閱「使用 CSS @scope at-rule 限制選取器的範圍」一文。

`scrollend`

Browser Support

Source

scrollend 是另一項可降低複雜度並改善捲動介面的功能。如果沒有 scrollend 事件，就無法可靠地偵測捲動動作是否完成。

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

有了 scrollend 事件，瀏覽器就能為您執行所有艱難的評估作業。

document.onscrollend = event => {…}

如需更多範例，請參閱 Scrollend，一種新的 JavaScript 事件。

同一文件的檢視畫面轉場效果

Browser Support

Source

最後，但絕對不容忽視的是，檢視畫面轉場效果也是 Interop 2025 的一部分。這項工作涉及同一個文件的檢視畫面轉場，因此適用於單頁應用程式和檢視畫面轉場類別。

請持續關注 Interop 2025 資訊主頁，瞭解這項專案在年內的進展情形。

Interop 2025 中包含的功能並非今年基準的唯一內容，但這些功能納入專案，代表我們將優先考量這些功能，並會在近期推出。

實驗才剛開始

今年是 Baseline 令人振奮的一年，我們也已完成許多去年宣布的計畫。我們現在已完成網頁功能資料的補充作業。這項功能已開放，開發人員可以使用這項功能建立工具。我們才剛開始這項計畫，如果您有產品或開放原始碼工具，可從納入這類資料中受益，歡迎與我們聯絡。

請密切留意 web.dev，我們會持續發布有關新工具的公告，並提供教學課程，協助您充分利用網路提供的所有資源。

網頁版新功能

網路平台資訊主頁和 web-features

協助您找出自身基準目標的工具

將資料與自己的工具整合

瞭解基準目標是否支援功能

browserslist-config-baseline

Lint 中的基準：ESLint 和 Stylelint

VS Code 和 JetBrains WebStorm 中的基準

網路的改善速度比以往更快

橫向書寫模式

錨定位置

Core Web Vitals：LCP 和 INP

LCP API

事件時間 API (適用於 INP)

改善 <details> 元素

CSS @scope

scrollend

同一文件的檢視畫面轉場效果

實驗才剛開始

`browserslist-config-baseline`

改善 `<details>` 元素

CSS `@scope`

`scrollend`